<style>
  .cropArea {
    overflow: hidden;
    width:600px;
    height:350px;
  }
</style>
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" ng-click="cancel()" aria-label="Close">
      <em class="ion-ios-close-empty sn-link-close"></em>
    </button>
    <h4 class="modal-title" id="modal-title">剪裁图片</h4>
  </div>
  <div class="modal-body" id="modal-body">
    <div class="row">
      <div class="col-sm-12">
        <form class="form-horizontal" name="editStaffForm" angular-validator angular-validator-submit="ok(user)" novalidate >

          <div class="cropArea">
            <ui-cropper
              image="cropSrc"
              result-image="myCroppedImage"
              area-type="rectangle"
              aspect-ratio="cropWidth/cropHeight"
              result-image-size="{w: cropWidth, h: cropHeight}"
            ></ui-cropper>
          </div>

          <div class="form-group" style="margin-top: 40px">
            <div class="col-sm-12 text-center">
              <button type="submit" class="btn btn-primary">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    &nbsp;
  </div>
</div>